<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    #include("common/header.html")
    <link type="text/css" rel="stylesheet" href="/css/signin.css"/>
    <title></title>
</head>
<body>
<header style="background: #005aab;" class="mui-bar mui-bar-nav head">
    <span class="mui-icon mui-icon-back href_btn" data-href="/v/login"></span>
    <h1 style="color: #FFFFFF; letter-spacing: 4px;" class="mui-title">注册</h1>
    <!--<span class="mui-icon mui-icon-more"></span>-->
</header>
<div class="mui-content">
    <div class="mui-input-group" id="validate">
        <div class="mui-input-row">
            <label>姓名</label>
            <input type="text" id="name" is-yz="true" yz-type="null" class="mui-input-clear" placeholder="请输入您的姓名">
        </div>
        <div class="mui-input-row">
            <label>身份证</label>
            <input type="text" id="idcard" is-yz="true" yz-type="null,id" class="mui-input-clear"
                   placeholder="请输入18位身份证号码">
        </div>
        <div class="mui-input-row" id="more_input">
            <label>省/市</label>
            <input id="showCityPicker3" style="width: 19%; padding: 0;padding-left: 5px;" type="text"
                   class="mui-input-clear" placeholder="区">
            <div class="diqu">市</div>
            <input id="showCityPicker2" is-yz="true" yz-type="null" style="width: 19%; padding: 0;padding-left: 5px;"
                   type="text"
                   class="mui-input-clear" placeholder="市">
            <div class="diqu">省</div>
            <input id="showCityPicker1" is-yz="true" yz-type="null" style="width: 19%; padding: 0;padding-left: 5px;"
                   type="text"
                   class="mui-input-clear" placeholder="省">
        </div>
        <div class="mui-input-row">
            <label>服务机构</label>
            <input type="text" id="service_org" is-yz="true" yz-type="null" class="mui-input-clear"
                   placeholder="请输入所在服务机构">
        </div>
        <div class="mui-input-row">
            <label>部门</label>
            <input type="text" id="dept" is-yz="true" yz-type="null" class="mui-input-clear"
                   placeholder="请输入所在部门">
        </div>
        <div class="mui-input-row">
            <label>领导</label>
            <input type="text" id="leader_mobile" is-yz="true" yz-type="null,phone" class="mui-input-clear"
                   placeholder="请输入直属上级领导手机号">
        </div>
        <div class="mui-input-row">
            <label>手机号</label>
            <input type="text" id="mobile" is-yz="true" yz-type="null,phone" class="mui-input-clear"
                   placeholder="用于登录和找回密码">
        </div>
        <div class="mui-input-row" style="position: relative">
            <label>验证码</label>
            <input type="text" id="msg_code" is-yz="true" yz-type="null,length" min="6" max="6" class="mui-input-clear"
                   placeholder="请输入验证码">
            <input onclick="sendMsg()" id="timer" value="发送" type="button"
                   style="position: absolute; top: 0px;right:0px;width: 25%; height: 88%; font-size: 14px; padding: 2px 12px; background: #007AFF;color: #FFFFFF;border-radius: 4px;">
        </div>
        <div class="mui-input-row">
            <label>密码</label>
            <input type="password" id="password" is-yz="true" yz-type="null,length,password" min="6" max="16"
                   eq-id="password_require" class="mui-input-clear" placeholder="请输入数字加字母密码">
        </div>
        <div class="mui-input-row">
            <label>确认密码</label>
            <input type="password" id="password_require" is-yz="true" yz-type="null,length,password" min="6" max="16"
                   eq-id="password" class="mui-input-clear" placeholder="请输入数字加字母密码">
        </div>
        <div class="annue">
            <button type="button" class="mui-btn mui-btn-primary" onclick="reg()">注册</button>
        </div>
    </div>
</div>
</body>

<script>

    mui.init();

    var reg_validate = $("#validate").validator();

    function reg() {

        if (!reg_validate.check()) {
            return;
        }

        var name = $.trim($("#name").val());
        var idCard = $.trim($("#idcard").val());
        var province = $.trim($("#showCityPicker1").val());
        var city = $.trim($("#showCityPicker2").val());
        var area = $.trim($("#showCityPicker3").val());
        var serviceOrg = $.trim($("#service_org").val());
        var dept = $.trim($("#dept").val());
        var leaderMobile = $.trim($("#leader_mobile").val());
        var mobile = $.trim($("#mobile").val());
        var msg_code = $.trim($("#msg_code").val());
        var password = $.trim($("#password").val());
        var password_require = $.trim($("#password_require").val());

        mui.ajax('/v/reg', {
            data: {
                name: name,
                idCard: idCard,
                province: province,
                city: city,
                area: area,
                serviceOrg: serviceOrg,
                dept: dept,
                leaderMobile: leaderMobile,
                mobile: mobile,
                msgCode: msg_code,
                password: password
            },
            dataType: 'json',//服务器返回json格式数据
            type: 'post',//HTTP请求类型
            timeout: 10000,//超时时间设置为10秒；
            success: function (data) {
                //服务器返回响应，根据响应结果，分析是否登录成功；
                console.log(data);
                if (data.code == -1) {
                    mui.toast(data.msg);
                    return;
                }

                mui.toast('注册成功!');

                mui.openWindow({
                    url: '/v/login',
                    id: '/v/login'
                });
            },
            error: function (xhr, type, errorThrown) {
                //异常处理；
                console.log(type);
                mui.toast('请求异常,请稍后重试!');
            }
        });
    }

    function sendMsg() {

        var mobile = $.trim($("#mobile").val());

        if (mobile == null || mobile == "" || mobile.length != 11) {
            mui.toast('手机号码格式不正确!');
            return;
        }
        //倒计时
        timer();
        //发送短信
        mui.ajax('/v/msg', {
            data: {mobile: mobile},
            dataType: 'json',//服务器返回json格式数据
            type: 'post',//HTTP请求类型
            timeout: 10000,//超时时间设置为10秒；
            success: function (data) {
                //服务器返回响应，根据响应结果，分析是否登录成功；
                console.log(data);
                if (data.code == -1) {
                    mui.toast(data.msg);
                    return;
                }
                mui.toast('发送成功!');
            },
            error: function (xhr, type, errorThrown) {
                //异常处理；
                console.log(type);
                mui.toast('请求异常,请稍后重试!');
            }
        });
    }

    var countdown = 60;
    function timer() {
        if (countdown == 0) {
            $("#timer").attr("disabled", false);
            $("#timer").val("重新发送");
            countdown = 60;
            return
        } else {
            $("#timer").attr("disabled", true);
            $("#timer").val(countdown + "  s");
            countdown--;
        }

        setTimeout(function () {
            timer();
        }, 1000)
    }

    (function ($, doc) {
        $.init();
        $.ready(function () {
            var cityPicker3 = new $.PopPicker({
                layer: 3
            });
            cityPicker3.setData(cityData3);
            var show_sheng = doc.getElementById('showCityPicker1');
            var show_shi = doc.getElementById('showCityPicker2');
            var show_qu = doc.getElementById('showCityPicker3');
            var more_input = document.getElementById("more_input");
            var listinput = more_input.getElementsByClassName("mui-input-clear");
            for (var i = 0; i < listinput.length; i++) {
                listinput[i].addEventListener('tap', function (event) {
                    cityPicker3.show(function (items) {
                        sheng = (items[0] || {}).text;
                        shi = (items[1] || {}).text;
                        qu = (items[2] || {}).text;
                        if (sheng.indexOf("省") > 0) {
                            show_sheng.value = sheng.substring(0, sheng.lastIndexOf('省'));
                        } else {
                            show_sheng.value = sheng;
                        }
                        if (show_shi.value.indexOf("市") > 0) {
                            show_shi.value = shi.substring(0, shi.lastIndexOf('市'));
                        } else {
                            show_shi.value = (items[1] || {}).text;
                        }
                        if (qu == "" || qu == undefined) {
                            show_qu.value = '';
                        } else {
                            show_qu.value = qu;
                        }
                    });
                }, false);
            }

        });
    })(mui, document);

</script>
</html>
